<template>
  <view class="page">
	  <!-- header开始 -->
		<view class="header">
			<!-- Location开始 -->
			<view class="locationName">
				<uni-icons type="location-filled" size="20" color="#0000FF"></uni-icons>
				<text>石家庄</text>
			</view>
			  <!-- Location结束 -->
			<!-- 搜索框开始 -->
			<view class="uni-search-bar">
				<uni-search-bar placeholder="请输入关键字进行查找" cancel-button="none" radius="100"/>
			</view>
			<!-- 搜索框结束 -->
		</view>
		<!-- header结束 -->
		<!-- 首页分类显示开始 -->
		<view class="classify_wrap">
					<!-- 横向分类滚动开始 -->
					<view class="classify_scroll_x">
						<scroll-view scroll-x="true" >
							<view class="segmented-wrap">
								<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
							</view>
						</scroll-view>
					</view>
					<!-- 横向分类滚动结束 -->
					<!-- 分类 icon 开始 -->
					<view class="classify_icon">
						<uni-icons type="list" size="28" color="gray" @click="goToGrid"></uni-icons>
					</view>
			<!-- 分类icon结束 -->
		 </view>
		<!-- 首页分类显示结束 -->
		<!-- 主要内容开始 -->
			<view class="uni-margin-wrap">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								  <swiper-item v-for="(item, index) in data" :key="item._id">
								    <view class="swiper-item">
								      <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
								    </view>
								  </swiper-item>
								</swiper>
							</view>
						</unicloud-db>
					</view>
				<view class="content">
					<view v-if="current === 0">
								<!-- 会员权益开始 -->
						<view class="vip-wrap">
									<uni-card title="会员权益" :thumbnail="vipIcon" margin="5px">
										<uni-grid :column="column" :show-border="false" :square="false">
											<uni-grid-item v-for="(item, index) in vipItem">
												<view class="grid-item-box">
													<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
													<text>{{ item.text }}</text>
												</view>
											</uni-grid-item>
										</uni-grid>
									</uni-card>
								</view>
								<!-- 会员权益结束 -->
					<!-- 轮播图结束 -->
					
					<!-- 书籍列表开始 -->
					<view class="bookList">
						<uni-section title="最热商品" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
						<unicloud-db v-slot:default="{data, loading, error, options}" :options="formData" collection="sunshine-book" @load="load">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
									<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义商品列表" v-for="(item, index) in data" :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
										<template v-slot:header>
										    <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
										      <image class="slot-image" :src="item.coverImage.url" mode="aspectFill"></image>
										    </view>
										</template>
										  <template v-slot:body>
										   <view class="shop">
											<view class="bookName">
											  <text class="uni-ellipsis-2">{{item.bookName}}</text>
											</view>
											<view class="author">
											  <text class="uni-tag hot-tag">作者 | {{ item.author }}</text>
											  <text>出版社 | {{ item.publisher }}</text>
											</view>
											<view class="price">
											  <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text>
											  <text>&nbsp;</text>
											  <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
											</view>
										   </view>
										  </template>
									</uni-list-item>
								</uni-list>
								<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
							</view>
						</unicloud-db>
					</view>
					<!-- 书籍列表结束 -->
				</view>
				<view v-show="current === 1">
					<!-- 儿童类列表开始 -->
					<view class="bookList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunshine-book" where="classify=='儿童'">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data" >
										<template v-slot:header>
										    <view class="slot-box">
										      <image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
										    </view>
										</template>
										  <template v-slot:body>
											<view class="bookName">
											  <text>{{item.bookName}}</text>
											</view>
											<view class="author">
											  <text>作者 | {{ item.author }}</text>
											  <text>出版社 | {{ item.publisher }}</text>
											</view>
											<view class="price">
											  <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
											  <text>&nbsp;</text>
											  <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
											</view>
										  </template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 儿童类列表结束 -->
				</view>
				<view v-show="current === 2">
				<!-- 教辅类列表开始-->
				<view class="bookList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="sunshine-book" where="classify=='教辅'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data" >
									<template v-slot:header>
									    <view class="slot-box">
									      <image class="slot-image" :src="item.coverImage.url" mode="widthFix"></image>
									    </view>
									</template>
									  <template v-slot:body>
										<view class="bookName">
										  <text>{{item.bookName}}</text>
										</view>
										<view class="author">
										  <text>作者 | {{ item.author }}</text>
										  <text>出版社 | {{ item.publisher }}</text>
										</view>
										<view class="price">
										  <text class="cheapPrice">¥ {{ getYuan(item.cheapPrice) }}</text>
										  <text>&nbsp;</text>
										  <text class="bookPrice"> ¥ {{ getYuan(item.price) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				</view>
				<!-- 教辅类列表结束 -->
				</view>
			</view>
		<!-- 主要内容结束 -->
	</view>
</template>

<script>
  export default {
    data() {
      return {
		 classify:["主页","儿童","教辅","文学社科","艺术","经管励志","考试法律","科技生活","文创"],
		 				current: 0,
		 				indicatorDots: true,
		 				autoplay: true,
		 				interval: 2000,
		 				duration: 500,
		 				column: 3,
		 				vipIcon: '/static/tabbar/VIP.png',
		 				vipItem: [
		 					{text: '购买储值卡', icon: '/static/tabbar/vip-card.png'},
		 					{text: '会员签到', icon: '/static/tabbar/Processing.png'},
		 					{text: '领券中心', icon: '/static/tabbar/lingjuanzhongxin.png'}
		 				],
		 
		  collection: 'opendb-mall-goods',
		  // 查询字段，多个字段用 , 分割
		  field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
		  formData: {
		  	waterfall: false, // 布局方向切换
		  	status: 'loading', // 加载状态
		  },
		  tipShow: false // 是否显示顶部提示框
      }
    },
	onLoad() {},
    methods: {
		load(data,ended){
			if(ended){
				this.formData.status = 'noMore'
			}
		},
		select() {
			this.formData.waterfall = !this.formData.waterfall;
		},
		getYuan(data){
		    let yuan = Math.floor(data / 100)
		    let fen = data % 100
		    if(fen < 10){
				if(fen == 0){
					fen = "0"
				}else{
					fen = '0' + fen
				}
			} 
		    return yuan+'.'+fen
		  },
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToGridPage(){
				uni.navigateTo({
					url:'/pages/grid/grid'
				})
			},
    },
	/**
	 * 下拉刷新回调函数
	 */
	onPullDownRefresh() {
		this.formData.status = 'more'
		this.$refs.udb.loadData({clear:true},()=>{
			this.tipShow = true
			clearTimeout(this.timer)
			this.timer = setTimeout(()=>{
				this.tipShow  = false
			},1000)
			uni.stopPullDownRefresh()
		})
	},
	/**
	 * 上拉加载回调函数
	 */
	onReachBottom() {
		this.$refs.udb.loadMore()
	},
  }
</script>
	
<style lang="scss">
	@import '../../common/uni-ui.scss';
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	.pages {
		background-color: #0000ff;
	}
	
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
	}
	
	.uni-search-bar {
		background-color: #FFFFFF;
		height: 50px;
		width: 650rpx;
	}
	
		
	.classify_wrap{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.classify_scroll_x{
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
		white-space: nowrap;
	}
	.segmented-wrap{
		width: 1300rpx;
	}
	.uni-margin-wrap{
			margin-top: 5rpx;
		}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.classify_icon{
		display: flex;
		flex: 1;
		height: 90rpx;
		background-color: #ffffff;
		margin: 5rpx 8rpx 2rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.grid-item-box{
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		font-size: 16px;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.bookName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.author{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.price {
	  display: flex;
	  flex-direction: row;
	  line-height: 40rpx;
	}
	.cheapPrice{
	  font-size: 40rpx;
	  color: #000000;
	}
	.bookPrice{
	  font-size: 24rpx;
	  color: #AAAAAA;
	  text-decoration-line: line-through;
	}
	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			/* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
				::v-deep
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
	.uni-list--waterfall {
		
		/* #ifndef H5 || APP-VUE */
		 /* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
		::v-deep .uni-list {
			/* #endif */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			box-sizing: border-box;
		
			/* #ifdef H5 || APP-VUE */
			 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
			::v-deep
			/* #endif */
			.uni-list-item--waterfall {
				width: 50%;
				box-sizing: border-box;
		
				.uni-list-item__container {
					padding: 5px;
					flex-direction: column;
				}
			}
		
			/* #ifndef H5 || APP-VUE */
		}
		
		/* #endif */
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}
	.shop-picture {
		width: 110px;
		height: 110px;
	}
	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}
	.shop-price-text {
		font-size: 16px;
	}
	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.hot-tag {
		background: #ffffff;
		border: none;
		color: #000000;
	}
</style>
